<template>

    <el-dialog destroy-on-close :title="formInline.id?'修改项目':'新增项目'" :visible.sync="dialogVisible" width="760px" :close-on-click-modal="false" :before-close="close">
        <div class="add-box">
            <el-form :rules="rules" ref="ruleForm" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="项目名称" prop="name">
                    <el-input maxlength="20" clearable class="width" v-model="formInline.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="归属客户" prop="client">
                    <el-select :disabled="formInline.id?true:false" clearable class="width" v-model="formInline.client" placeholder="">
                        <el-option v-for="(item,index) in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="成本预估金额" prop="costMoney">
                    <el-input maxlength="20" type="number" clearable class="width" v-model="formInline.costMoney" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="合同预估金额" prop="contractMoney">
                    <el-input maxlength="20" type="number" clearable class="width" v-model="formInline.contractMoney" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="" prop="" style="margin-bottom: 0px;">
                    <div style="width: 500px;margin:  -15px 0 0 170px;float: right;text-align: right;">
                        预估利润率:{{profit}}%
                    </div>
                </el-form-item>
                <el-form-item label="项目进度" prop="schedule">
                    <el-select clearable class="width" v-model="formInline.schedule" placeholder="">
                        <el-option v-for="(item,index) in objectplanList" :key="item.name" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商" prop="supplier">
                        <el-select collapse-tags value-key="item.id" multiple clearable class="width" v-model="formInline.supplier">
                            <el-option v-for="(item,index) in supplierList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="产品服务" prop="productType">
                    <el-select clearable class="width" v-model="formInline.productType" placeholder="">
                        <el-option v-for="(item,index) in ProjectType" :key="item.id" :label="item.type_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                  <el-form-item label="描述" prop="desc">
                      <el-input maxlength="20" clearable class="width" v-model="formInline.desc" placeholder=""></el-input>
                  </el-form-item>
                
                  <el-form-item label="上传附件" prop="fileList">
                      <el-input style="position: absolute;z-index: 0;top: -999999px;" v-model="formInline.fileList.length"></el-input>
                      <el-upload
                          :disabled="formInline.fileList.length>8"
                          :accept='$store.state.accept'
                          action="#"
                          :on-change="beforeUpload_contract"
                          :show-file-list="false"
                          :file-list="formInline.fileList"
                          :auto-upload="false">
                          <el-button v-if="formInline.fileList.length>8" disabled style="margin-right: 123.5px;" icon="el-icon-paperclip" class="btn1" plain :loading="addLoading">上传附件</el-button>
                          <el-button v-else style="margin-right: 123.5px;" icon="el-icon-paperclip" class="btn1" plain :loading="addLoading">上传附件</el-button>
                      </el-upload>
                      
                      <div class="file-list">
                        <div style="margin-bottom: -15px" class="file-items" v-for="(child,childindex) in formInline.fileList" :key="childindex">
                          <span>附件{{childindex+1}}</span>
                          <a>{{child.title?child.title:child.name}}</a>
                          <i class="el-icon-close" @click="delSupplierFile(childindex)" v-loading="addLoading"></i>
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="统筹人员" prop="assistant">
                        <el-select clearable class="width" v-model="formInline.assistant">
                            <el-option v-for="(item,index) in AdminList" :key="index" :label="item.nickname" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
            </el-form>
        </div>
        <div class="btn-box">
            <el-button class="btn" type="primary" @click="onSubmit('ruleForm')" :loading="addLoading">确认</el-button>
            <el-button class="btn" @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import Api from '@/api/common'
    import adminApi from '@/api/admin'
    export default {
        name: 'Dashboard',
        props: {
            addLoading:{
                type:Boolean,
                default:false
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
            clientList:{
                type:Array,
                default:()=>{
                    return []
                }
            },
            principalList:{
                type:Array,
                default:()=>{
                    return []
                }
            },
            formInlineChange:{
                type:Object,
                default:()=>{
                    return {}
                }
            },
            objectplanList:{
                type:Array,
                default:()=>{
                    return [
                        // {
                        // id:1,
                        // name:'需求分析'
                        // },{
                        // id:2,
                        // name:'项目评估'
                        // },
                        {
                        id:3,
                        name:'项目立项'
                        },{
                        id:4,
                        name:'合同签订'
                        },{
                        id:5,
                        name:'项目实施'
                        },{
                        id:6,
                        name:'项目交付'
                        },{
                        id:7,
                        name:'项目审计'
                        },{
                        id:8,
                        name:'项目归档'
                    }]
                }
            },
            supplierList:{
                type:Array,
                default:()=>{
                    return []
                }
            }
        },
        data() {
            return {
                rules: {
                    productType:[
                        { required: true, message: '请选择产品服务', trigger: 'change' },
                    ],
                    name: [
                        { required: true, message: '请输入项目名称', trigger: 'change' },
                    ],
                    client: [
                        { required: true, message: '请选择归属客户', trigger: 'change' },
                    ],
                    schedule: [
                        { required: true, message: '请选择项目进度', trigger: 'change' },
                    ],
                    contractMoney: [
                        { required: true, message: '请输入合同预估金额', trigger: 'change' },
                    ],
                    // principal: [
                    //     { required: true, message: '请选择商务负责人', trigger: 'change' },
                    // ],
                    costMoney: [
                        { required: true, message: '请输入成本估计金额', trigger: 'change' },
                    ],
                },
                ProjectType:[],
                formInline: {
                    name: '',
                    client: '',
                    schedule: '',
                    contractMoney: '',
                    principal: '',
                    costMoney: '',
                    supplier: [],
                    desc:'',
                    fileList:[],
                    productType:'',
                    assistant:''
                },
                profit:0,
                AdminList:[]
            }
        },
        watch:{
            formInline:{
                handler(val) {
                    let profit = 0;
                    if (val.contractMoney && val.costMoney && Number(val.contractMoney) >= Number(val.costMoney)){
                        if(Number(val.costMoney) == 0 && Number(val.contractMoney) == 0){
                            profit = 0;
                        }else{
                            profit = 100 - (Number(val.costMoney) / Number(val.contractMoney)) * 100
                            profit = Number(JSON.stringify(profit).substring(0, 4))
                        }
                    }
                    this.profit = profit;
                },
                deep: true
            },
            dialogVisible(val1,val2){
                if(!this.dialogVisible){
                    if(this.$refs['ruleForm']){
                        this.$refs['ruleForm'].resetFields();
                    }
                }else{
                    this.getProjectType();
                    if(this.formInlineChange && JSON.stringify(this.formInlineChange) != '{}'){
                        console.log(this.formInlineChange,"formInlineChange")
                        this.formInline = this.formInlineChange;
                    }
                }
            },
        },
        computed: {

        },
        mounted(){
            this.getAdminList();
        },
        methods: {
            // 获取统筹人员列表
            getAdminList(){
                adminApi.getAdminList({
                    page:1,
                    num:99999,
                    is_assistant:1
                }).then(res=>{
                    console.log(res,"统筹人员")
                    if(res.code == 200){
                        this.AdminList = res.data.list;
                    }
                })
            },
            // 获取项目类型
            getProjectType(){
                Api.getProjectType().then(res=>{
                    console.log(res,"获取项目类型")
                    if(res.code == 200){
                        this.ProjectType = res.data;
                    }
                })
            },
            delSupplierFile(index){
                let formInline = this.formInline;
                formInline.fileList.splice(index,1);
                this.formInline = formInline;
            },
            beforeUpload_contract(e){
                if(10 < Number(e.size/1024/1024)){
                    this.$message('单文件大小不能超过10MB')
                    return;
                }
                let formInline = this.formInline;
                formInline.fileList.push(e);
                this.formInline = formInline;
            },
            // 关闭
            close(){
                if(this.addLoading)return;
                this.$emit('close','');
            },
            // 确认新增项目
            onSubmit(formName) {
                let formInline = this.formInline;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('onSubmit',formInline)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import './index.scss';
</style>